<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>
	<head>
<f:loadBundle basename="messages" var="msgs" />
<title><h:outputText value="#{msgs.title}" /></title>
<script type="text/javascript"
	src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.js"></script>
<script
	src="${facesContext.externalContext.requestContextPath}/resources/script/ui/jquery-ui-1.9.0.custom.js"></script>
<script type="text/javascript"
	src="${facesContext.externalContext.requestContextPath}/views/management/scripts/home.js"></script>
	
<script type="text/javascript"
	src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.dataTables.js"></script>

<style type="text/css" title="currentStyle">
	@import "${facesContext.externalContext.requestContextPath}/resources/css/themes/base/jquery.ui.all.css";
	@import	"${facesContext.externalContext.requestContextPath}/views/management/css/home.css";
	@import	"${facesContext.externalContext.requestContextPath}/views/css/tabs.css";
	@import	"${facesContext.externalContext.requestContextPath}/views/css/theme.css";
	@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable_page.css";
	@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable_table.css";
	@import "${facesContext.externalContext.requestContextPath}/views/css/theme.css";
</style>

<script type="text/javascript" charset="utf-8">
	//         
	$(function() {
		$('#stock_messages_table').dataTable();
		$("#tabs")
			.tabs(
			{
				beforeLoad : function(event, ui) {
					ui.jqXHR
						.error(function() {
							ui.panel
									.html("Couldn't load this tab. We'll try to fix this as soon as possible. "
											+ "If this wouldn't be a demo.");
						});
				},
				beforeActivate : function(event, ui) {

			}
		});

		var allPanels = $('.accordion > dd').hide();

		$('.accordion > dt > a').click(function() {
			allPanels.slideUp();
			$(this).parent().next().slideDown();
			return false;
		});

	});
	
	function showInfo(value)
	{
		var time = 500;
		if(value == 'items')
		{
			$("#items_info").show(time);
		}
		if(value == 'stocks')
		{
			$("#stocks_info").show(time);
		}
		if(value == 'po')
		{
			$("#po_info").show(time);
		}
		if(value == 'stq')
		{
			$("#stq_info").show(time);
		}
		if(value == 'users')
		{
			$("#users_info").show(time);
		}
		if(value == 'brands')
		{
			$("#brands_info").show(time);
		}
		if(value == 'locations')
		{
			$("#locations_info").show(time);
		}
		if(value == 'categories')
		{
			$("#categories_info").show(time);
		}
		if(value == 'stores')
		{
			$("#stores_info").show(time);
		}
		if(value == 'trs')
		{
			$("#tr_info").show(time);
		}
		return false;
	}
	
	function hideInfo()
	{
		$("#link_info div").hide();
		return false;
	}
	//
</script>


	</head>
	<body>
		<ui:include src="../header/header.xhtml" />

		<br />
		<br />
		<br />
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Home</a></li>
				<li><a href="#tabs-2">Messages</a></li>
			</ul>
			<div id="tabs-1">
			
				<table>
				<tr>
				<td>
				<div id='tabs_1_menu'>
					<dl class="accordion">
						<dt>
							<a href="">Items</a>
						</dt>
						<dd>
							<a href="items.faces" onmouseover="return showInfo('items')" onmouseout="return hideInfo()">Items</a>
						</dd>

						<dt>
							<a href="">Stocks</a>
						</dt>
						<dd>
							<a href="stocks.faces" onmouseover="return showInfo('stocks')" onmouseout="return hideInfo()">Stocks</a>
						</dd>

						<dt>
							<a href="">Purchase Orders</a>
						</dt>
						<dd>
							<a href="purchase_orders.faces" onmouseover="return showInfo('po')" onmouseout="return hideInfo()">Purchase Orders</a>
						</dd>
						<dt>
							<a href="">Stock Requisitions</a>
						</dt>
						<dd>
							<a href="stock_reqs.faces" onmouseover="return showInfo('stq')" onmouseout="return hideInfo()">Stock Requisitions</a>
						</dd>
						<dt>
							<a href="">Admin</a>
						</dt>
						<dd>
							<a href="users.faces" onmouseover="return showInfo('users')" onmouseout="return hideInfo()">Users</a>
							<br></br>
							<a href="brands.faces" onmouseover="return showInfo('brands')" onmouseout="return hideInfo()">Brands</a>
							<br></br>
							<a href="locations.faces" onmouseover="return showInfo('locations')" onmouseout="return hideInfo()">Locations</a>
							<br></br>
							<a href="categoriesTree.faces" onmouseover="return showInfo('categories')" onmouseout="return hideInfo()">Categories</a>
							<br></br>
							<a href="stores.faces" onmouseover="return showInfo('stores')" onmouseout="return hideInfo()">Stores</a>
							<br></br>
							<a href="transactionReferences.faces" onmouseover="return showInfo('trs')" onmouseout="return hideInfo()">Transaction Reference Number</a>
							<br></br>
						</dd>
						<dt>
							<a href="">About</a>
						</dt>
						<dd>
						</dd>
					</dl>
				</div>
				</td>
				<td>
				<div id="link_info" class="link_info_div">
						<div id="items_info">
							Create. Edit, View items
						</div>
						<div id="stocks_info">
							Create. Edit, View Stocks
						</div>
						<div id="po_info">
							Create. Edit, View Purchase Orders
						</div>
						<div id="stq_info">
							Create. Edit, View Stock Requisitions
						</div>
						<div id="users_info">
							Create. Edit, View Users
						</div>
						<div id="brands_info">
							Create. Edit, View Brands
						</div>
						<div id="locations_info">
							Create. Edit, View Locations
						</div>
						<div id="categories_info">
							Create. Edit, View categories
						</div>
						<div id="stores_info">
							Create. Edit, View Stores
						</div>
						<div id="tr_info">
							Create. Edit, View Transaction Reference
						</div>
					</div>
					</td>
					</tr>
				</table>
			</div>

			<div id="tabs-2">
				<div id="stock_messages_div">
					<h3>Stock Messages</h3>
					<table class="display" id="stock_messages_table">
						<thead>
							<tr>
								<th><h:outputText value="Type" /></th>
								<th><h:outputText value="Message" /></th>
								<th><h:outputText value="Status" /></th>
								<th><h:outputText value="Time" /></th>
								<th><h:outputText value="Link" /></th>
							</tr>
						</thead>
						<tbody>
						<ui:repeat var="message" value="#{messageService.stockMessageList}">
							<tr>
								<td><h:outputText value="#{message.messageType}" /></td>
								<td><h:outputText value="#{message.message}" /></td>
								<td><h:outputText value="#{message.status}" /></td>
								<td><h:outputText value="#{message.time}" /></td>
								<td><h:outputText value="#{message.messageLink}" /></td>
							</tr>
						</ui:repeat>
	
						</tbody>
	
						<tfoot>
							<tr>
								<th><h:outputText value="Type" /></th>
								<th><h:outputText value="Message" /></th>
								<th><h:outputText value="Status" /></th>
								<th><h:outputText value="Time" /></th>
								<th><h:outputText value="Link" /></th>
							</tr>
						</tfoot>
					</table>
				</div>
				<br>
				</br>
				<div id="po_messages_div">
					<h3>PO Messages</h3>
					<table>
					<ui:repeat var="message" value="#{messageService.POMessageList}">
						<tr>
							<td><h:outputText value="#{message.messageType}" /></td>
							<td><h:outputText value="#{message.message}" /></td>
							<td><h:outputText value="#{message.status}" /></td>
							<td><h:outputText value="#{message.time}" /></td>
							<td><h:outputText value="#{message.messageLink}" /></td>
						</tr>
					</ui:repeat>
					</table>
				</div>
				<br>
				</br>
				<div id="streq_messages_div">
					<h3>Stock Requisition Messages</h3>
					<table>
					<ui:repeat var="message" value="#{messageService.STREQMessageList}">
						<tr>
							<td><h:outputText value="#{message.messageType}" /></td>
							<td><h:outputText value="#{message.message}" /></td>
							<td><h:outputText value="#{message.status}" /></td>
							<td><h:outputText value="#{message.time}" /></td>
							<td><h:outputText value="#{message.messageLink}" /></td>
						</tr>
					</ui:repeat>
					</table>
				</div>
			</div>
		</div>
		
		
		

		<p></p>
		<ui:include src="../footer/footer.xhtml" />
	</body>
</f:view>
</html>
